<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // DOM
        概念: 文档对象模型-- -> 将html文档封装成一个document对象
        作用: 方便通过js操作网页

        // 获得标签对象

        // 通过id获取标签
        let abc = document.getElementById(1)
        console.log(abc);
        语法 document.getElementById(id名)
        返回值 返回的就是当前的标签对象
        // 获得body标签对象
        // 语法:    document.body
        let a = document.body
        console.log(a);
        // 获得html标签对象
        // 语法:    document.documentElement
        let b = document.documentElement
        console.log(b);


        // 通过id获取操作图片
        // 首先获取图片标签对象
        let myimg = document.getElementById('img')
        // 然后赋予标签src路径
        myimg.src = './images/b03.jpg'


        // css样式
        // 修改背景图
        // 获取背景图对象
        let a = document.getElementById('d')
        // 找到背景图css地址,然后赋值
        // 语法" 标签对象.style css属性='值'
        a.style.background = 'cyan'



        // 给非表单标签设置文字内容
        // 语法1: 标签对象.innerText = 值;
        // 语法2: 标签对象.innerHTML = 值;
        // 代码演示:语法1: 标签对象.innerText = 值;
        let div = document.getElementById('one');
        div.innerText = '<h1>我是通过js方式设置的文字</h1>';
        div.innerHTML = '<h1>我是通过js方式设置的文字</h1>';
        // 1.通过innerText给标签设置文字内容的时候,不管是普通的文字还是html标签,最后都是以文字的形式设置给标签
        // 2.通过innerHTML给标签设置文字内容的时候,如果遇到html标签,则可以渲染成真正的html标签

        // 修改表单,加等号
        .value     获取表单文本内容
            .value = 修改 表单文本内容
                // 修改非表单,也是加等号
                .innerText 只能显示纯文字
                    .innerhtml 可以显示标签



        // 倒计时 案例
        // 1.倒计时需要两个时间 现在的时间,未来的时间
        // 2.需要两个时间以时间戳的形式做差
        // 3.做差之后将 以毫秒为单位的 数字转化为秒数
        // 4.以秒数为准,分别计算 天,时,分,秒
        // 5.最后将字符串拼接显示在网页中
        // d = parseInt(总秒数 / 60 / 60 / 24)  //  计算天数
        // h = parseInt(总秒数 / 60 / 60 % 24)  //   计算小时
        // m = parseInt(总秒数 / 60 % 60);      //计算分数
        // s = parseInt(总秒数 % 60);           //计算秒数
        function daojishi() {
            let time = +new Date()
            let overtime = +new Date('2021-6-1 12:00:00')
            let num = overtime - time
            console.log(num);
            times = num / 1000
            let d = parseInt(times / 60 / 60 / 24)  //天数
            let h = parseInt(times / 60 / 60 % 24)  //小时
            let m = parseInt(times / 60 % 60)       //分钟
            let s = parseInt(times % 60)            //秒
            let h1 = document.getElementById('zxc')
            h1.innerText = `距离毕业还有${d}天${h}时${m}分${s}秒`
            return h1
        }
        daojishi()
        setInterval(daojishi, 1000)




        // 定时器 
        // 代码隔一段时间 执行一次
        // 语法: setInterval(函数名, 毫秒)
        setInterval(daojishi, 1000)
    </script>
</body>

</html>